<template>
	<view class="item" @click="goToDetail(item)">
		<view class="" style="position: relative; width: 250rpx">
			<u-swiper :list="swiperlist" :autoplay="false" height="250rpx" radius="10"></u-swiper>
			<view class="labelbox">
				<text v-for="(litem, lindex) in labels" :key="lindex"
					:style="{ backgroundColor: litem.attrs.bgColor }">{{ litem.text }}</text>
			</view>
			<view v-if="item.pastureLevel && item.pastureLevel != 0" class="rate">
				<u-rate :count="item.pastureLevel" v-model="item.pastureLevel" readonly></u-rate>
			</view>
		</view>
		<view class="content">
			<view class="title">
				<view> {{ `${item.province} ${item.city} ${item.county}` }}</view>
				<view> {{ $u.timeFormat(item.createTime, "yyyy-mm-dd") }}</view>
			</view>
			<view class="center">
				<view class="centeritem u-line-1" v-for="(item, index) in rulesValue">
					{{ item.title }}: {{ item.v }}
				</view>
			</view>
			<view class="userRemarks" v-if="item.userRemarks">
				<view class="u-line-2">
					{{ item.userRemarks }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import th from "@/static/goodsitem/th.png";
	export default {
		name: "goodsitem",
		props: {
			item: {
				type: Object,
				default: () => {
					return {};
				},
			},
			dicts: {
				type: Object,
				default: () => {
					return {};
				},
			},
			levelTypeList: {
				type: Array,
				default: () => {
					return [];
				},
			},
			type: {
				type: String,
				default: "",
			},
			rules: {
				type: Array,
				default: () => {
					return [];
				},
			},
		},
		data() {
			return {
				th,
				btncustomStyle: {
					width: "auto",
					margin: "0 10rpx 0 0",
					minWidth: "auto",
				},
			};
		},
		computed: {
			rulesValue() {
				let item = this.rules.find((e) => e.level3Type == this.item.level3Type);
				if (!item) {
					return [];
				}
				let jsonForms = JSON.parse(this.item.jsonForms);
				let r = item.inputs.map((e) => {
					return {
						...e,
						v: this.inputstr(e, jsonForms),
					};
				});
				r = r.filter((e) => {
					return e.v && e.title != "农活类型";
				});
				if (this.item.contactName) {
					r.push({
						title: "联系人",
						v: this.item.contactName
					})
				}
				return r;
			},
			rulesValueNhlx() {
				let item = this.rules.find((e) => e.level3Type == this.item.level3Type);
				if (!item) {
					return [];
				}
				let jsonForms = JSON.parse(this.item.jsonForms);
				let r = item.inputs.map((e) => {
					return {
						...e,
						v: this.inputstr(e, jsonForms),
					};
				});
				r = r.filter((e) => {
					return e.v && e.title == "农活类型";
				});
				return r;
			},
			// 			$required: "请输入农活类型"
			// display: true
			// effect: Object
			// field: "farm_work_type"
			// hidden: false
			// info: ""
			// name: "ref_Fpkxmakj34m7adc"
			// options: Array(23)
			// props: Object
			// title: "农活类型"
			// type: "select"
			// _fc_drag_tag: "select"
			// _fc_id: "id_Fec7makj34m7acc"
			swiperlist() {
				if (this.type == "video") {
					return [this.item.videoUrl];
				}
				let r = this.item.imagesUrl.split(",");
				if (this.item.videoUrl) {
					r.push(this.item.videoUrl);
				}
				console.log(r);
				return r;
			},
			labels() {
				let r = [];
				try {
					if (this.rulesValueNhlx.length == 1) {
						r.push({
							text: this.rulesValueNhlx[0].v,
							attrs: {
								bgColor: "#F3B367",
							},
						});
					}
					// let dqtransactionalMode = this.dicts["transactional_mode"].find(
					//   (item) => {
					//     return item.value == this.item.transactionalMode;
					//   }
					// );
					// if (dqtransactionalMode) {
					// r.push({
					//   text: dqtransactionalMode.label,
					//   attrs: {
					//     bgColor: "#F3B367",
					//   },
					// });
					// }
					// manage_model
					let dqmanage_model = this.dicts["manage_model"].find((item) => {
						return item.value == this.item.manageModel;
					});

					if (dqmanage_model) {
						r.push({
							text: dqmanage_model.label,
							attrs: {
								bgColor: "#DC6A71",
							},
						});
					}
				} catch (error) {}
				return r;
			},
		},
		methods: {
			inputstr(item, data) {
				// "select"
				if (item.type == "select") {
					if (item?.props?.multiple) {
						let str = data[item.value] || [];
						let options = item.options || [];
						let dqOption = options.filter((e) => {
							return str.includes(e.value);
						});
						if (dqOption.length != 0) {
							return dqOption.map((e) => e.label).join();
						}
					}
					let options = item.options || [];
					let dqOption = options.find((e) => {
						return e.value == data[item.value];
					});
					if (dqOption) {
						return dqOption.label;
					}
				}
				return data[item.value] || "";
			},
			levelTypestr() {
				let r = this.levelTypeList.find((item) => {
					return item.id == this.item.level3Type;
				});
				return r ? r.fullName : "";
			},
			goToDetail(item) {
				if (this.type == "favorite") {
					uni.navigateTo({
						url: "/pages/shop/goods/detail/detail?id=" + item.productTradingId,
					});
					return;
				}
				uni.navigateTo({
					url: "/pages/shop/goods/detail/detail?id=" + item.id,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	// .goodslist {
	// 	display: flex;
	// 	justify-content: space-between;
	// 	flex-wrap: wrap;
	// 	padding: 0 20rpx;
	.item {
		position: relative;
		width: 710rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		margin: 10rpx 0;
		font-size: 28rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		padding: 10rpx;

		.content {
			flex: 1;
			width: 0;
			padding-left: 20rpx;
			min-height: 250rpx;
			display: flex;
			flex-direction: column;

			// padding-left: 10rpx;
			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: #999;
				height: 60rpx;
				//   border-bottom: 1rpx solid #eee;
			}

			.center {
				flex: 1;
				padding: 0rpx 0 10rpx 0;
				display: flex;
				font-size: 24rpx;
				flex-wrap: wrap;

				.centeritem {
					min-width: 50%;
				}
			}

			.userRemarks {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: #f56c6c;
				height: 60rpx;
				//   border-top: 1rpx solid #eee;
			}
		}

		&>image:nth-last-child(2) {
			position: absolute;
			bottom: 32rpx;
			right: 22rpx;
			width: 24rpx;
			height: 6rpx;
		}

		.rate {
			position: absolute;
			top: 10rpx;
			left: 10rpx;
		}

		.th {
			position: absolute;
			top: 0rpx;
			right: 0rpx;
		}

		.labelbox {
			position: absolute;
			bottom: 0;
			left: 10rpx;

			text {
				display: inline-block;
				border-radius: 4rpx;
				// background-color: #d96b6c;
				color: #ffffff;
				margin-right: 10rpx;
				text-align: center;
				height: 32rpx;
				padding: 0 10rpx;
				line-height: 32rpx;
				font-size: 24rpx;
			}
		}

		.title,
		.subtitle {
			// white-space: nowrap;
			// text-overflow: ellipsis;
			// -webkit-box-pack: center;
			// overflow: hidden;
		}

		.title {
			font-size: 30rpx;
			color: rgb(51, 51, 51);
			line-height: 42rpx;
		}

		.subtitle {
			font-size: 26rpx;
			color: rgb(153, 153, 153);
			margin-top: 4rpx;
			line-height: 36rpx;

			.retentionMoney {
				.text {
					padding-left: 8rpx;
					color: rgb(227, 13, 13);
				}
			}
		}

		.price {
			color: rgb(227, 13, 13);
			font-size: 26rpx;
			height: 40rpx;
			font-family: "AllAndNone";

			.priceMin {
				font-size: 34rpx;
				margin-right: 4rpx;
				font-weight: bold;
			}

			.unit {
				font-size: 24rpx;
				color: #999;
			}

			.marketPrice {
				margin-left: 6rpx;
				font-size: 28rpx;
				color: rgb(153, 153, 153);
				text-decoration: line-through;
			}

			.spec {
				font-size: 24rpx;
			}
		}

		.menu {
			position: absolute;
			display: none;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.6);
			z-index: 2;

			view {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 300rpx;
				height: 70rpx;
				margin: 16rpx auto;
				border-radius: 70rpx;
				background-color: #ffffff;
			}

			text {
				display: block;
				width: 140rpx;
				margin-left: 8rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.retentionMoney {
		color: $u-error;
		height: 40rpx;
		font-size: 18rpx;

		display: flex;
		align-items: center;
		font-weight: bold;
	}

	.activity {
		color: #bf1111;
		font-size: 24rpx;
	}

	// }
</style>